<template>
    <div>
        <div class="header" ref="header">
            <div class="location">
                <div class="address" aria-label="">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31" class="index-okfdP_0"><path fill="#FFF" fill-rule="evenodd" d="M22.116 22.601c-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></path></svg>
                    <span>
                        {{address}}
                    </span>
                    <div class="drap">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" class="index-2iXz3_0"><path fill="#FFF" fill-rule="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path></svg>
                    </div>
                </div>
            </div>
        </div>
        <div class="search" ref="search">
            <div class="search-box">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-opacity=".38" d="M14.778 13.732a.739.739 0 1 1-1.056 1.036l-2.515-2.565a.864.864 0 0 1-.01-1.206 4.894 4.894 0 0 0 1.357-3.651c-.126-2.492-2.156-4.52-4.648-4.647a4.911 4.911 0 0 0-5.16 5.163c.126 2.475 2.13 4.496 4.605 4.642.451.026.896-.008 1.326-.1a.739.739 0 0 1 .308 1.446c-.56.12-1.137.164-1.72.13-3.227-.19-5.83-2.815-5.995-6.042a6.39 6.39 0 0 1 6.71-6.715c3.25.165 5.884 2.8 6.05 6.048a6.37 6.37 0 0 1-1.374 4.3l2.12 2.161z"></path></svg>
                <span>
                    搜索商家，商品
                </span>
            </div>
        </div>
        <div class="swipe" ref="swipe">
            <mt-swipe :auto="4000">
                <mt-swipe-item v-for="(item,index) in panelMenu" :key="index">
                    <menu-panel :menu-list="item"></menu-panel>
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="recommend-title">
            推荐商家
        </div>
        <search-menu ref="menus" v-model="active" @handleClick="clickMenu" >
          <div slot="zList">
              <!-- dsadsa -->
          </div>
        </search-menu>
        <shop-list v-model="list" :loading="loading" @load="loadData"></shop-list>
        <!-- <ul>
        </ul> -->
    </div>
</template>
<script>
import MenuPanel from "@/components/menu-panel";
import StarFive from "@/components/star-five";
import SearchMenu from "@/components/search-menu";
import ShopList from "_c/shop-list";
import { getPostion, gpsToGd } from "@/api/position";
import { setClass,sticky,setScrollTop } from "@/libs/util";
import {getList} from "@/api/list";
export default {
  components: {
    MenuPanel,
    StarFive,
    SearchMenu,
    ShopList
  },
  data() {
    return {
      list: [],
      lastH: 0,
      active: 'zonghe',
      panelMenu: [
        [
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          }
        ],
        [
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          },
          {
            name: "美食",
            path: "meishi",
            icon: require("@/assets/images/meishi.webp")
          }
        ]
      ],
      address: "",
      loading: false,
      page:1,
      count:0
    };
  },
  mounted() {
    let searchH = this.$refs.search.offsetHeight
    let headerH = this.$refs.header.offsetHeight
    let swipeH = this.$refs.swipe.offsetHeight
    this.lastH = headerH+searchH+swipeH;
    setScrollTop(0).then(()=>{
      window.addEventListener('scroll',()=> {
        sticky(this.$refs.search,headerH,0)
        console.log(this.$refs.menus)
        if(this.$refs.menus || this.$refs.menus.$el){
          sticky(this.$refs.menus.$el,headerH+searchH+swipeH,searchH)
        }
      })
    })
    // sticky(this.$refs.search,100)
    this._getPosition()
      .then(position => {
        return gpsToGd(position.coords.longitude, position.coords.latitude);
      })
      .then(res => {
        return new Promise((resolve, reject) => {
          if (res.status === 200 && res.data.status === "1") {
            resolve(res.data.locations);
          } else {
            reject({ error: -1, msg: "坐标转换失败" });
          }
        });
      })
      .then(res => {
        return getPostion(res);
      })
      .then(res => {
        return new Promise((resolve, reject) => {
          if (res.status === 200 && res.data.status === "1") {
            resolve(res.data.regeocode);
          } else {
            reject({ error: -2, msg: res.data.info });
          }
        });
      })
      .then(res => {
        let tmp = res.addressComponent;
        let address =
          tmp.city +
          tmp.district +
          tmp.streetNumber.street +
          tmp.streetNumber.number;
        this.address = address;
        // address = alert(JSON.stringify(res));
      })
      .catch(error => {
        // alert(JSON.stringify(error));
      });

  },
  methods: {
    _getPosition() {
      return new Promise((resolve, reject) => {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            position => {
              resolve(position);
            },
            error => {
              reject(error);
            }
          );
        }
      });
    },
    _resizescrollTop(){

    },
    clickMenu(dom){
      if(dom==='zonghe' || dom === 'order'){
        setScrollTop(this.lastH)
        // this.$refs.mask.style.display = 'block'
      }
      this.$refs.menus.showSelect()
      // console.log(dom)
    },
    loadData(){
      this.loading = true
      console.log(1)
      this.list = [1]
      var data = {
        image: "https://fuss10.elemecdn.com/1/72/3c54d8b5a9b582555bc9e97430acfpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
        title: "必胜客宅急送",
        rate: 5,
        orders: 2,
        delivery: true,

      }
      // getList(8,16)
    }
  },
  beforeDestroy(){
    console.log("销毁")

  }
};
</script>
<style lang="less" scoped>
.header {
  height: 2.8125rem;

  display: flex;
  justify-content: center;
  flex-direction: column;

  .location {
    padding: 0 3vw 0 3vw;
    width: 94vw;
    flex: 1;
    display: flex;
    align-items: center;
    background-image: linear-gradient(90deg, #0af, #0085ff);
    .address {
      display: flex;
      height: 1rem;
      svg {
        height: 100%;
      }
      span {
        display: flex;
        padding-left: 0.5rem;
        font-size: 1rem;
        font-weight: 700;
        color: #ffffff;
      }
      .drap {
        padding-left: 0.5rem;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        svg {
          height: 0.21875rem;
        }
      }
    }
  }
}
.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;


}
.search {
  background-image: linear-gradient(90deg, #0af, #0085ff);
  // padding: 0 3vw 0 3vw;
  // width: 94vw;
  height: 3.1875rem;
  z-index: 999;
  width: 100vw;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .search-box {
    height: 2.25rem;
    width: 94vw;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 1.125rem;
    svg {
      height: 1rem;
    }
    span {
      display: flex;
      color: #999999;
      padding-left: 0.2rem;
      font-size: 1rem;
    }
  }
}
.swipe {
  height: 11rem;
}
.line() {
  display: block;
  content: "";
  height: 0.0625rem;
  width: 1.25rem;
  background-color: #999999;
}
.recommend-title {
  height: 2.25rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  &::before {
    .line();
    margin-right: 0.8125rem;
  }
  &::after {
    .line();
    margin-left: 0.8125rem;
  }
}
</style>
<style lang="less">
.mint-swipe {
  .mint-swipe-indicators {
    .mint-swipe-indicator {
      width: 1rem;
      height: 0.0625rem;
      display: inline-block;
      border-radius: 0.125rem;
      background: #000;
      opacity: 0.1;
      margin: 0 3px;
    }
    .is-active {
      background: #0085ff;
      opacity: 1;
    }

  }
}

</style>


